<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-06 10:20:36
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-04-13 10:34:34
 * @FilePath: \cxl-h5\src\components\button\Index.vue
-->
<template>
    <section
        :class="['cxl-button', type, round, active ? 'active' : '', border ? 'border' : '', effect ? 'effect' : '']"
        :style="{
            color: textColor,
            backgroundColor: bgColor
        }"
    >
        <slot></slot>
    </section>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const props = defineProps(['text', 'active', 'type', 'round', 'border', 'bgColor', 'textColor'])
const active = ref(false)
const type = ref('')
const round = ref('')
const border = ref('')
const bgColor = ref('#fff')
const textColor = ref('#333')
const effect = ref(false)

watchEffect(() => {
    active.value = props.active === undefined ? false : props.active
    type.value = props.type === undefined ? '' : props.type
    round.value = props.round === undefined ? '' : 'round'
    border.value = props.border === undefined ? '' : 'border'
    bgColor.value = props.bgColor === undefined ? '' : props.bgColor
    textColor.value = props.textColor === undefined ? '' : props.textColor

    if (props.active !== undefined) {
        effect.value = true
    }
})
</script>

<style scoped lang="scss">
.cxl-button {
    width: 100%;
    height: var(--cxl-size-40);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cxl-size-6);
    font-size: var(--cxl-size-14);
    transition: all 0.35s;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cxl-text-color-primary);

    &.round {
        border-radius: calc(var(--cxl-size-40) / 2);
    }
    &.border {
        border: 1px solid var(--cxl-color-999999);
    }

    &.primary {
        color: var(--cxl-color-white);
        cursor: default;
        background-color: var(--cxl-color-primary);
    }

    &.success {
        color: var(--cxl-color-white);
        cursor: default;
        background-color: var(--cxl-color-success);
    }

    &.info {
        color: var(--cxl-color-white);
        cursor: default;
        background-color: var(--cxl-color-info);
    }

    &.warning {
        color: var(--cxl-color-white);
        cursor: default;
        background-color: var(--cxl-color-warning);
    }
    &.danger {
        color: var(--cxl-color-white);
        cursor: default;
        background-color: var(--cxl-color-danger);
    }
    &.effect {
        &.primary {
            color: var(--cxl-color-white);
            background-color: var(--cxl-color-primary-light-7);
            &.active {
                cursor: default;
                background-color: var(--cxl-color-primary);
            }
        }

        &.success {
            color: var(--cxl-color-white);
            background-color: var(--cxl-color-success-light-7);
            &.active {
                cursor: default;
                background-color: var(--cxl-color-success);
            }
        }

        &.info {
            color: var(--cxl-color-white);
            background-color: var(--cxl-color-info-light-7);
            &.active {
                cursor: default;
                background-color: var(--cxl-color-info);
            }
        }

        &.warning {
            color: var(--cxl-color-white);
            background-color: var(--cxl-color-warning-light-7);
            &.active {
                cursor: default;
                background-color: var(--cxl-color-warning);
            }
        }
        &.danger {
            color: var(--cxl-color-white);
            background-color: var(--cxl-color-danger-light-7);
            &.active {
                cursor: default;
                background-color: var(--cxl-color-danger);
            }
        }
    }

    &.text {
        width: auto;
        height: auto;
        font-size: inherit;
    }
}
</style>
